<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>
<body>
<h2>{{counter}}</h2>

<button id="minus">-</button>
<button id="plus">+</button>
<script>
    let counter = 0

    let counterElement = document.querySelector("h2")
    console.log(counterElement);

    let plusElement = document.getElementById("plus")
    console.log(plusElement);

    let minusElement = document.getElementById("minus")
    console.log(minusElement);

    counterElement.textContent = eval(counterElement.textContent)

    plusElement.addEventListener("click", function () {
        console.log("单击 + 按钮");
        ++ counter
        counterElement.textContent = counter.toString()
    })

    minusElement.onclick = function () {
        console.log("单击 - 按钮");
        --counter
        counterElement.textContent = counter.toString()
    }
</script>
</body>
</html>